import classNames from 'classnames';
import { format } from 'date-fns';
import { useTranslation } from 'react-i18next';
import Button from 'src/component/Button';
// import { DepositRecord } from 'src/model/Deposit';
import { bnFormat } from 'src/util/bigNumber';
import style from './DepositCard.module.scss';

type DepositRecord = any

type Props = {
    data: Array<DepositRecord>;
    navigateCallback: (record: DepositRecord) => void;
};

const DepositCard = ({ data, navigateCallback }: Props) => {
    const { t } = useTranslation();

    const onDetailClick = (record: DepositRecord) => () => {
        navigateCallback(record);
    };

    const elementMapFunction = (
        record: DepositRecord,
        index: number,
        array: Array<DepositRecord>,
    ) => (
        <div key={record.FID}>
            <div className={style.self}>
                <div className={style.item}>
                    <div className={style.label}>币别</div>
                    <div className={style.value}>{record.FType}</div>
                </div>
                <div className={style.item}>
                    <div className={style.label}>数量</div>
                    <div className={style.value}>{bnFormat(record.FQuantity)}</div>
                </div>
                <div className={style.others}>
                    <div className={style.addressValue}>{record.FAddress}</div>
                    <div>{format(Date.parse(record.createdAt), 'yyyy/MM/dd HH:mm:ss')}</div>
                </div>
                {/* <div className={style.button}>
                    <Button appearance="text" onClick={onDetailClick(record)}>
                        详情
                    </Button>
                </div> */}
            </div>
            <div className={classNames(style.divider, { [style.hide]: index >= array.length - 1 })} />
        </div>
    );

    return <div>{data.map(elementMapFunction)}</div>;
};

export default DepositCard;
